<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新建标签页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            background: gainsboro;
            background-image: url(/static/img/bg2.jpeg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        #datetime {
            font-size: 6rem;
            color: white;
            text-align: center;
            margin-top: 80px;
        }

        .bookmarks {
            display: grid;
            grid-template-columns: repeat(5, 1fr);  /* 重复 5 次, 每次的比例都是相同的  */
            margin-top: 12%;
            padding: 0 10%;
        }

        .bookmark {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            margin: 0 auto;
            font-size: 0.9rem;
            background-color: rgba(0, 0, 0, 0.3);
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
            text-decoration: none;
            color: white;
            border-radius: 8px;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        .bookmark:hover {
            background-color: rgba(0, 0, 0, 0.6);
            transform: translateY(-23px);
        }

        .bookmark img {
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .bookmarks {
                grid-template-columns: repeat(3, 1fr);
                padding: 0;
            }

            .bookmark {
                width: 80px;
                height: 80px;
            }
        }
    </style>
</head>

<body>
    <div id="datetime">Loading</div>

    <nav class="bookmarks">
        <a class="bookmark" href=""><img src="/static/img/bg5.jpeg" alt="Baidu">百度</a>
        <a class="bookmark" href=""><img src="./assets/baidu.png" alt="Baidu">百度</a>
        <a class="bookmark" href=""><img src="./assets/baidu.png" alt="Baidu">百度</a>
        <a class="bookmark" href=""><img src="./assets/baidu.png" alt="Baidu">百度</a>
        <a class="bookmark" href=""><img src="./assets/baidu.png" alt="Baidu">百度</a>
        <a class="bookmark" href=""><img src="./assets/baidu.png" alt="Baidu">百度</a>
        <a class="bookmark" href=""><img src="./assets/baidu.png" alt="Baidu">百度</a>
        <a class="bookmark" href=""><img src="./assets/baidu.png" alt="Baidu">百度</a>
        <a class="bookmark" href=""><img src="./assets/baidu.png" alt="Baidu">百度</a>



    </nav>

    <h1 style="height: 123px;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae aspernatur nobis, a praesentium facere incidunt qui explicabo amet, quisquam, excepturi sit blanditiis eos!</h1>
    <h1 style="height: 123px;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae aspernatur nobis, a praesentium facere incidunt qui explicabo amet, quisquam, excepturi sit blanditiis eos!</h1>
    <h1 style="height: 123px;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae aspernatur nobis, a praesentium facere incidunt qui explicabo amet, quisquam, excepturi sit blanditiis eos!</h1>
    <h1 style="height: 123px;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae aspernatur nobis, a praesentium facere incidunt qui explicabo amet, quisquam, excepturi sit blanditiis eos!</h1>
    <h1 style="height: 123px;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae aspernatur nobis, a praesentium facere incidunt qui explicabo amet, quisquam, excepturi sit blanditiis eos!</h1>
    <h1 style="height: 123px;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae aspernatur nobis, a praesentium facere incidunt qui explicabo amet, quisquam, excepturi sit blanditiis eos!</h1>
    <h1 style="height: 123px;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae aspernatur nobis, a praesentium facere incidunt qui explicabo amet, quisquam, excepturi sit blanditiis eos!</h1>
    <script>
        var datetimeEl = document.querySelector('#datetime')
        function setCurrentTime() {
            var hours = ('0' + (new Date()).getHours()).slice(-2)
            var mins = ('0' + (new Date()).getMinutes()).slice(-2)
            datetimeEl.innerHTML = `${hours}:${mins}`
        }

        setCurrentTime()

        setInterval(function () {
            setCurrentTime()
        }, 5000)

    //     function getBingWallpaper(resp) {
    //         const url = 'https://cn.bing.com' + resp.images[0].url
    //         const bodyEl = document.querySelector('body')
    //         bodyEl.style.backgroundImage = `url(${url})`
    //     }
    // </script>
</body>

</html>